<template>
  <div class="cpqd">
    <router-link class="nav-btn" to="/home"></router-link>
    <div class="sub-head">
      <div class="sub-head1 animated rollIn">&nbsp;</div>
      <div class="sub-head2-wrap animated height1 delay-2">
        <div class="sub-head2">&nbsp;</div>
      </div>
      <div class="sub-head3 animated bounceIn delay-4">&nbsp;</div>
      <div class="sub-head4 animated fadeIn delay-5">
        <ul class="waves">
          <li class="li1">
            <span class="ani-li"></span>
          </li>
          <li class="li2">
            <span class="ani-li"></span>
          </li>
          <li class="li3">
            <span class="ani-li"></span>
          </li>
        </ul>
      </div>
      <div class="sub-head5 animated fadeIn delay-5">
        <ul class="waves waves1">
          <li class="li1">
            <span class="ani-li"></span>
          </li>
          <li class="li2">
            <span class="ani-li"></span>
          </li>
          <li class="li3">
            <span class="ani-li"></span>
          </li>
        </ul>
      </div>
     <div class="sub-head6  scqj-head6 animated fadeIn"></div>
    </div>
    <div class="scqj">
      <img src alt v-lazy="scqjimg1">
      <img src alt v-lazy="scqjimg2">
      <img src alt v-lazy="scqjimg3">
      <img src alt v-lazy="scqjimg4">
      <div class="scqj-img5-wrap">
        <img src alt v-lazy="scqjimg5">
        <div class="lbt">
          <!-- <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide>
              <img width="100%" src="../assets/images/scqj-swiper1.png" alt>
            </swiper-slide>
            <swiper-slide>
              <img width="100%" src="../assets/images/scqj-swiper2.png" alt>
            </swiper-slide>
            <swiper-slide>
              <img width="100%" src="../assets/images/scqj-swiper3.png" alt>
            </swiper-slide>
            <swiper-slide>
              <img width="100%" src="../assets/images/scqj-swiper4.png" alt>
            </swiper-slide>
            <swiper-slide>
              <img width="100%" src="../assets/images/scqj-swiper5.png" alt>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper> -->
        </div>
      </div>
      <!-- <div class="scqj-img6">
        <div class="scqj-gif1"></div>
      </div>
      <div class="scqj-img7">
        <div class="scqj-gif2"></div>
      </div> -->

    </div>

    <div class="next-bg">
      <div class="next-3 animated fadeIn"></div>
      <div class="next-4 animated fadeIn"></div>
      <div class="next-5 animated fadeIn"></div>
      <router-link to="/ppjs" class="next-img-wrap">
        <img src="../assets/images/next-1.png" class="next-img" alt>
      </router-link>
    </div>
  </div>
</template>

<script>
// import 'swiper/dist/css/swiper.css'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: "scqj",
  data() {
    return {
      scqjimg1: require("@/assets/images/scqj-img1.jpg"),
      scqjimg2: require("@/assets/images/scqj-img2.jpg"),
      scqjimg3: require("@/assets/images/scqj-img3.jpg"),
      scqjimg4: require("@/assets/images/scqj-img4.jpg"),
      scqjimg5: require("@/assets/images/scqj-img5.jpg"),
      // swiperOption: {
      //   autoplay: true,
      //   pagination: {
      //     el: ".swiper-pagination",
      //     clickable: true
      //   }
      // }
    };
  },

  computed: {
    // swiper() {
    //   return this.$refs.mySwiper.swiper;
    // }
  },
  beforeDestroy: function() {
  },
  components: {
    // swiper,
    // swiperSlide
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.scqj img {
  display: block;
  width: 100%;
}
.swiper-pagination >>>.swiper-pagination-bullet-active{
    background: #d71c25;
}
.scqj-img5-wrap{
  position: relative;
}
.scqj-head6{
  bottom:0;
  height: 21.525rem;
}
.lbt{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10.375rem;
}
.scqj-img6{position: relative;width: 100%;height:18.0rem;background:url(../assets/images/scqj-img6.jpg) no-repeat;background-size: 100% 100%; z-index: 20;}
.scqj-img7{position: relative;width: 100%;height:14.25rem;background:url(../assets/images/scqj-img7.jpg) no-repeat;background-size: 100% 100%; z-index: 20;}
.scqj-gif1{position: absolute;left:11.6rem;top:10.7rem;width:5.6rem;height:6.675rem;background:url(../assets/images/scqj-gif1.gif) no-repeat;background-size:100% 100%;z-index: 22;}
.scqj-gif2{position: absolute;left:6.19rem;top:5.9rem;width:6.3rem;height:7.5rem;background:url(../assets/images/scqj-gif2.gif) no-repeat;background-size:100% 100%;z-index: 22;}
</style>
